<!DOCTYPE html>
<html lang="en">
<head>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
        $(function() {
            $( "#id_expiry_date" ).datepicker();
        });
    </script>
    <script>
        $(function() {
            $( "#id_checkup_expiry" ).datepicker();
        });
    </script>
    <script>
        $(function() {
            $( "#id_insurance_start" ).datepicker();
        });
    </script>
    <script>
        $(function() {
            $( "#id_insurance_end" ).datepicker();
        });
    </script>
    <meta charset="utf-8">
    <title> Add New Car Record </title>

    <!-- Le styles -->
    <link href="http://lensandphoto.com/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }
    </style>
    <link href="http://lensandphoto.com/css/bootstrap.cs" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="/Users/BaN/Desktop/Manager/templates/assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/Users/BaN/Desktop/Manager/templates/assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/Users/BaN/Desktop/Manager/templates/assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/Users/BaN/Desktop/Manager/templates/assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="/Users/BaN/Desktop/Manager/templates/assets/ico/apple-touch-icon-57-precomposed.png">
</head>

<body>

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">Management System</a>
            <div class="nav-collapse collapse">
                <p class="navbar-text pull-right">
                    Logged in as <a href="#" class="navbar-link">Username</a>
                </p>
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">Companies</a></li>
                    <li><a href="#contact">Employees</a></li>
                    <li><a href="../../">Cars</a></li>
                    <li><a href="#contact">Documents</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</div>
<div class="container">

    <h4 class="media-heading"> New car details</h4>


    <!-- Nested media object -->
    <div class="media">
        <form action="../post/" method="post">
            {% csrf_token %}
            <table class="table table-hover table-condensed table-striped">
                <tr>
                    <th> Brand </th>
                    <th> Model</th>
                    <th> Chase No. </th>
                    <th> Year </th>
                </tr>
                <tr>
                    <td>{{ car.brand }}</td>
                    <td>{{ car.car_model }}</td>
                    <td>{{ car.chase_no }}</td>
                    <td>{{ car.year }}</td>
                </tr>
                <tr>
                    <th> Owner </th>
                    <th> Company</th><th></th><th></th>

                </tr>
                <tr>
                    <td>{{ car.user }}</td>
                    <td>{{ car.company }}</td>

                </tr>
                <tr>
                    <th> Plate Number</th>
                    <th> English Part</th>
                    <th> Arabic Part</th><th></th>

                </tr>
                <tr>
                    <td>{{ car.plate_number }}</td>
                    <td>{{ car.plate_str }}</td>
                    <td>{{ car.arabic_plate_str }}</td>

                </tr>
                <tr>
                    <th> Registration Expiry </th>
                    <th> Checkup Expiry</th><th></th><th></th>
                </tr>
                <tr>
                    <td>{{ car.expiry_date }}</td>
                    <td>{{ car.checkup_expiry }}</td>
                </tr>
                <tr>
                    <th> Insurance Company </th>
                    <th> Insurance Cost</th>
                    <th> Type</th>
                    <th></th>

                </tr>
                <tr>
                    <td>{{ car.insurance }}</td>
                    <td>{{ car.insurance_cost }}</td>
                    <td>{{ car.insurance_type }}</td>

                </tr>

                <tr>

                    <th> Start Date </th>
                    <th> End Date</th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>

                    <td>{{ car.insurance_start }}</td>
                    <td>{{ car.insurance_end }}</td>
                </tr>

            </table>
            <div class="span4 offset10">
                <input type="submit" value="Submit" />
            </div>
        </form>
    </div>

    <footer>
        <p>&copy; Dhahran Tower</p>
    </footer>


</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>

</body>
</html>